<template>
  <div class="left-menu">
    <div
      class="item"
      @click="switchActive('appearance')"
      :class="{ 'item-active': active === 'appearance' }"
    >
      <div class="icon" style="background: linear-gradient(135deg, #e2b0ff, #9f44d3)">
        <setting-config theme="two-tone" :fill="['#fff', '#2F88FF']" :strokeWidth="3" />
      </div>
      <div class="name">外观</div>
    </div>
    <div
      class="item"
      @click="switchActive('wallpaper')"
      :class="{ 'item-active': active === 'wallpaper' }"
    >
      <div class="icon" style="background: linear-gradient(135deg, #0cebeb, #20e3b2, #29ffc6)">
        <multi-ring theme="two-tone" :fill="['#fff', '#2F88FF']" :strokeWidth="2" />
      </div>
      <div class="name">墙纸</div>
    </div>
    <div
      class="item"
      @click="switchActive('desktop')"
      :class="{ 'item-active': active === 'desktop' }"
    >
      <div class="icon" style="background: linear-gradient(135deg, #17ead9, #6078ea)">
        <computer theme="two-tone" :fill="['#fff', '#74b9ff']" :strokeWidth="3" />
      </div>
      <div class="name">桌面</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Computer, MultiRing, SettingConfig } from "@icon-park/vue-next"
import { ref } from "vue"

const emits = defineEmits(["switchMenu"])

const active = ref("appearance")

function switchActive(name: string) {
  active.value = name
  emits("switchMenu", name)
}
</script>

<style scoped lang="scss">
.left-menu {
  padding: 0.1rem;
  user-select: none;

  .item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.05rem 0.1rem;
    border-radius: 0.05rem;

    .icon {
      width: 0.25rem;
      height: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.05rem;
      font-size: 0.2rem;

      span {
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          width: 1em;
          height: 1em;
        }
      }
    }

    .name {
      font-size: 0.15rem;
      margin-left: 0.1rem;
    }
  }

  .item-active {
    color: white;
    background: var(--primary-color);
  }
}
</style>
